<template>
	<div>
		<el-tabs v-model = "activeName" @tab-click = "handleClick">
			<el-tab-pane label = "基础配置" name = "first">
				<el-table v-loading = "tableDataLoading" :data = "tableData">
					<el-table-column fixed prop = "type" label = "编号" width = "80">
					 </el-table-column>
					<el-table-column prop = "min" label = "类型">
					</el-table-column>
					<el-table-column prop = "value" label = "内容" width = "500">
					</el-table-column>
					<el-table-column prop = "createAt" label = "创建时间">
					</el-table-column>
					<el-table-column label = "操作" prop = "id" width = "120">
						<template slot-scope = "scope">
							<el-button size = "mini" type = "primary" :disabled = "!isAuth('wechatList:update')"
                         @click = "amendone(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style = "text-align: center;margin-top: 10px;float:right">
				  <el-pagination @size-change = "handleSizeChange" @current-change = "handleCurrentChange" :page-sizes = "[10, 20, 30, 40]"
                         :page-size = "size" :current-page = "page" layout = "total,sizes, prev, pager, next,jumper"
                         :total = "tableData.length">
				  </el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane label = "模板配置" name = "second">
				<el-table v-loading = "tableDataLoading" :data = "tableData">
					<el-table-column fixed prop = "type" label = "编号" width = "80">
					 </el-table-column>
					<el-table-column prop = "min" label = "类型">
					</el-table-column>
					<el-table-column prop = "value" label = "内容" width = "500">
					</el-table-column>
					<el-table-column prop = "createAt" label = "更新时间">
					</el-table-column>
					<el-table-column label = "操作" prop = "id" width = "120">
						<template slot-scope = "scope">
							<el-button size = "mini" type = "primary" :disabled = "!isAuth('wechatList:update')"
                         @click = "amendone(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style = "text-align: center;margin-top: 10px;float:right">
				  <el-pagination @size-change = "handleSizeChange" @current-change = "handleCurrentChange" :page-sizes = "[10, 20, 30, 40]"
                         :page-size = "size" :current-page = "page" layout = "total,sizes, prev, pager, next,jumper"
                         :total = "tableData.length">
				  </el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane label = "菜单配置" name = "third">
				<div class = "public-account-management clearfix">
				  <!--左边配置菜单-->
				  <div class = "left">
				      <div class = "menu clearfix">
				        <div class = "menu_bottom" v-for = "(item, i) of menu.button" :key = "i">
				          <!-- 一级菜单 -->
				          <div @click = "menuFun(i,item)" class = "menu_item" :class = "{'active': isActive == i}">{{ item.name }}</div>
                  <!--以下为二级菜单-->
				          <div class = "submenu" v-if = "isSubMenuFlag == i">
				              <div class = "subtitle" v-for = "(subItem, k) in item.sub_button" :key = "k">
				                <div class = "menu_subItem" :class = "{'active': isSubMenuActive == i + '' +k}"
                             @click = "subMenuFun(item, subItem, i, k)">{{ subItem.name }}</div>
				              </div>
                    <!--  二级菜单加号， 当长度 小于  5 才显示二级菜单的加号  -->
				              <div class = "menu_bottom menu_addicon" v-if = "item.sub_button.length < 5" @click = "addSubMenu(item)"><i
                        class = "el-icon-plus"></i></div>
				          </div>
				        </div>
                <!-- 一级菜单加号 -->
				        <div class = "menu_bottom menu_addicon" v-if = "menuKeyLength < 3" @click = "addMenu"><i class = "el-icon-plus"></i></div>
				      </div>
				  </div>
          <!--右边配置-->
				  <div v-if = "!showRightFlag" class = "right">
				    <div class = "configure_page">
				      <div class = "delete_btn">
				        <el-button size = "mini" type = "danger" icon = "el-icon-delete" v-if = "isAuth('wechatList:delete')"
                           @click = "deleteMenu(tempObj)">删除当前菜单</el-button>
				      </div>
				      <div>
				        <span>菜单名称：</span>
				        <el-input class = "input_width" v-model = "tempObj.name" placeholder = "请输入菜单名称" clearable></el-input>
				      </div>

				      <div>
				        <div class = "menu_content">
				          <span>菜单内容：</span>
				          <el-radio-group v-model = "tempObj.type">
				            <el-radio :label = "'view'">跳转链接</el-radio>
				            <el-radio :label = "'click'">发送关键词</el-radio>
				            <el-radio :label = "'miniprogram'">小程序</el-radio>
				          </el-radio-group>
				        </div>
				        <div class = "configur_content">
				          <div v-if = "tempObj.type == 'view'">
				            <span>跳转链接：</span>
				            <el-input class = "input_width" v-model = "tempObj.url" placeholder = "请输入链接" clearable></el-input>
				          </div>
				          <div v-if = "tempObj.type == 'click'">
				            <div>
				              <span>关键词：</span>
				              <el-input class = "input_width" v-model = "tempObj.key" placeholder = "请输入关键词" clearable></el-input>
				            </div>
				            <p class = "blue">tips:这里需要配合关键词推送消息一起使用</p>
				          </div>
				          <div v-if = "tempObj.type == 'miniprogram'">
							  <div class = "applet">
							    <span>小程序的默认url：</span>
							    <el-input class = "input_width" v-model = "tempObj.url" placeholder = "请输入小程序的url" clearable></el-input>
							  </div>
							  <div class = "applet">
								<span>小程序的appid：</span>
								<el-input class = "input_width" v-model = "tempObj.appid" placeholder = "请输入小程序的appid" clearable></el-input>
							  </div>
							  <div>
								  <span>小程序的页面路径：</span>
								  <el-input class = "input_width" v-model = "tempObj.pagepath" placeholder = "请输入小程序的页面路径，如：pages/index"
                            clearable></el-input>
								</div>
				            <p class = "blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
				          </div>
				        </div>
				      </div>


				    </div>
            <!-- <div>menu对象值：{{menu}}</div> -->
					 <el-button class = "save_btn" type = "primary" v-if = "isAuth('wechatList:save')" @click = "saveFun">保存并发布至菜单</el-button>
				  </div>
          <!--一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
				  <div v-if = "showRightFlag" class = "right">
				     <p>请选择菜单配置</p>
				  </div>
				</div>
			</el-tab-pane>
			<el-tab-pane label = "关键字配置" name = "fourth">
				<div style = "float: right;margin-right:2%;">
				  <el-button :disabled = "!isAuth('wechatList:add')" style = "margin: 10px 0;" size = "mini" type = "primary" icon = "document"
                     @click = "addNotice">添加关键字</el-button>
				</div>
				<el-table v-loading = "tableDataLoading" :data = "keywordData">
					<el-table-column fixed prop = "id" label = "编号" width = "80">
					 </el-table-column>
					<el-table-column prop = "lable" label = "关键字">
					</el-table-column>
					<el-table-column prop = "value" label = "内容" width = "500">
					</el-table-column>
					<el-table-column prop = "createAt" label = "更新时间">
					</el-table-column>
					<el-table-column label = "操作" prop = "id" width = "150">
						<template slot-scope = "scope">
							<el-button size = "mini" type = "primary" :disabled = "!isAuth('wechatList:update')"
                         @click = "amend(scope.$index, scope.row)">编辑
							</el-button>
							<el-button size = "mini" type = "danger" :disabled = "!isAuth('wechatList:delete')" @click = "deletes(scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
        <!-- 添加关键字 -->
				<el-dialog title = "添加关键字" :visible.sync = "dialogFormVisible" center>
					<div style = "margin-bottom: 10px;">
						<span style = "width: 200px;display: inline-block;text-align: right;">关键字：</span>
						<el-input style = "width:50%;" v-model = "lable" placeholder = "请输入关键字"></el-input>
					</div>
					<div style = "margin-bottom: 10px;">
						<span style = "width: 200px;display: inline-block;text-align: right;position: relative;top: -90px;">内容：</span>
						<el-input style = "width: 50%;" type = "textarea" :rows = "5" v-model = "value" placeholder = "请输入内容"></el-input>
					</div>
					<div slot = "footer" class = "dialog-footer" style = "text-align: center;">
						<el-button @click = "dialogFormVisible = false">取 消</el-button>
						<el-button type = "primary" @click = "releasNoticeTo()">确 定</el-button>
					</div>
				</el-dialog>
        <!-- 修改关键字弹框 -->
				<el-dialog title = "修改" :visible.sync = "dialogFormVisible2" center>
					<el-form :model = "form">
					  <el-form-item label = "关键字：" :label-width = "formLabelWidth">
						<el-input v-model = "form.lable" style = "width:65%;"></el-input>
					  </el-form-item>
					  <el-form-item label = "内容：" :label-width = "formLabelWidth">
						<el-input v-model = "form.value" style = "width:65%;" type = "textarea" :rows = "5"></el-input>
					  </el-form-item>
					</el-form>
					<div slot = "footer" class = "dialog-footer" style = "text-align: center;">
						<el-button @click = "dialogFormVisible2 = false">取 消</el-button>
						<el-button type = "primary" @click = "amendNoticeTo()">确 定</el-button>
					</div>
				</el-dialog>
			</el-tab-pane>
		</el-tabs>
    <!-- 修改公告弹框 -->
		<el-dialog title = "修改" :visible.sync = "dialogFormVisible1" center>
			<el-form :model = "formnone">
			  <el-form-item label = "配置类型：" :label-width = "formLabelWidth">
				<el-input v-model = "formnone.min" style = "width:65%;" readonly></el-input>
			  </el-form-item>
			  <el-form-item label = "内容：" :label-width = "formLabelWidth">
				<el-input v-model = "formnone.value" style = "width:65%;"></el-input>
			  </el-form-item>
			</el-form>
			<div slot = "footer" class = "dialog-footer" style = "text-align: center;">
				<el-button @click = "dialogFormVisible1 = false">取 消</el-button>
				<el-button type = "primary" @click = "amendoneNoticeTo()">确 定</el-button>
			</div>
		</el-dialog>
  </div>
</template>

<script>

    export default {
      data () {
        return {
          size: 10,
          page: 1,
          lable: '',
          min: '',
          value: '',
          state: '',
          id: '',
          deployname: 'weixin',
          accesstoken: '',
          activeName: 'first',
          dialogFormVisible: false,
          dialogFormVisible1: false,
          dialogFormVisible2: false,
          dialogFormVisible3: false,
          tableDataLoading: true,
          formLabelWidth: '200px',
          form: {
            id: '',
            lable: '',
            value: '',
          },
          formnone: {
            id: '',
            min: '',
            value: '',
          },
          form2: {
            menuAdd: ''
          },
          keywordData: [],
          tableData: [],
          menuData: [],
          menuAdd: '',
          checkBoxData: [],  //多选框选择的值
          showRightFlag: true,//右边配置显示默认详情还是配置详情
          menu: {
            // // 一级菜单
            button: [
              {
                type: 'view',
                name: '领券中心',
                url: 'https://sqx.gomyorder.cn/?invitation=2242941210',
                sub_button: [],
              },
              {
                type: 'view',
                name: '拼多多券',
                url: 'https://mobile.yangkeduo.com/duo_cms_mall.html?pid=8948958_104234125&cpsSign=CM_190809_8948958_104234125_05e68780da621fd572b728c3ae1ee027&range_items=1%3A0%3A10000%2C2%3A10%3A1000&duoduo_type=2',
                sub_button: [],
              },
              {
                name: '会员中心',
                sub_button: [
                  {
                    type: 'view',
                    name: '个人中心',
                    url: 'https://sqx.gomyorder.cn/pages/member/user',
                    sub_button: [],
                  },
                  {
                    type: 'view',
                    name: '新人攻略',
                    url: 'https://sqx.gomyorder.cn/help/news.html',
                    sub_button: [],
                  },
                  {
                    type: 'view',
                    name: '联系客服',
                    url: 'https://sqx.gomyorder.cn/custom.jpg',
                    sub_button: [],
                  },
                ]
              }
            ]
          },//横向菜单
          isActive: -1,// 一级菜单点中样式
          isSubMenuActive: -1,// 一级菜单点中样式
          isSubMenuFlag: -1,// 二级菜单显示标志
          tempObj: {},//右边临时变量，作为中间值牵引关系
          tempSelfObj: {}
        }
      },
      methods: {
        handleSizeChange (val) {
          this.size = val
          this.dataSelect()
        },
        handleCurrentChange (val) {
          this.page = val
          this.dataSelect()
        },
        handleClick (tab, event) {
          if (tab._props.label == '基础配置') {
            this.deployname = 'weixin'
            this.dataSelect()
          }
          if (tab._props.label == '模板配置') {
            this.deployname = 'xiaoxi'
            this.dataSelect()
          }
          if (tab._props.label == '菜单配置') {
            this.menuSelect()
          }
          if (tab._props.label == '关键字配置') {
            this.keywordSelect()
          }
        },
        // 添加
        addNotice () {
          this.dialogFormVisible = true
        },
        // 添加关键字
        releasNoticeTo () {
          if (this.lable == '') {
            this.$notify({
              title: '提示',
              duration: 1800,
              message: '关键字不能为空',
              type: 'warning'
            })
            return
          }
          if (this.value == '') {
            this.$notify({
              title: '提示',
              duration: 1800,
              message: '内容不能为空',
              type: 'warning'
            })
            return
          }
          this.$http({
            url: this.$http.adornUrl2('/wx/saveWord'),
            method: 'post',
            data: this.$http.adornData({
              'lable': this.lable,
              'value': this.value,
            })
          }).then(({data}) => {
            this.dialogFormVisible = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.keywordSelect()
              }
            })
          })
        },
        // 修改配置弹框
        amendone (index, rows) {
          this.dialogFormVisible1 = true
          this.formnone.id = rows.id
          this.formnone.type = rows.type
          this.formnone.min = rows.min
          this.formnone.value = rows.value
        },
        // 修改配置
        amendoneNoticeTo () {
          this.$http({
            url: this.$http.adornUrl2('/common/save'),
            method: 'post',
            data: this.$http.adornData({
              'id': this.formnone.id,
              'type': this.formnone.type,
              'value': this.formnone.value,
            })
          }).then(({data}) => {
            if (data && data.status === 0) {
              this.dialogFormVisible1 = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        },
        // 修改弹框
        amend (index, rows) {
          this.dialogFormVisible2 = true
          this.form.id = rows.id
          this.form.lable = rows.lable
          this.form.value = rows.value
        },
        // 修改商品类别
        amendNoticeTo () {
          this.$http({
            url: this.$http.adornUrl2('/wx/saveWord'),
            method: 'post',
            data: this.$http.adornData({
              'id': this.form.id,
              'lable': this.form.lable,
              'value': this.form.value,
            })
          }).then(({data}) => {
            if (data && data.status === 0) {
              this.dialogFormVisible2 = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.keywordSelect()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        },
        // 删除
        deletes (row) {
          let id = row.id
          this.$confirm(`确定删除此条信息?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl2(`/wx/deleteById/${id}`),
              method: 'post',
              params: this.$http.adornData({})
            }).then(({data}) => {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.name = ''
                  this.keywordSelect()
                }
              })
            })
          }).catch(() => {
          })
        },
        // 获取数据列表
        dataSelect () {
          this.tableDataLoading = true
          this.$http({
            url: this.$http.adornUrl2(`/common/type/condition/${this.deployname}`),
            method: 'get',
            params: this.$http.adornParams({})
          }).then(({data}) => {
            if (data && data.status === 0) {
              this.tableDataLoading = false
              let returnData = data.data
              this.tableData = returnData
            }
          })
        },
        // 获取关键字列表
        keywordSelect () {
          this.tableDataLoading = true
          this.$http({
            url: this.$http.adornUrl2('/wx/getWordList'),
            method: 'post',
            params: this.$http.adornData({})
          }).then(({data}) => {
            if (data && data.status === 0) {
              this.tableDataLoading = false
              let returnData = data.data
              this.keywordData = returnData
            }
          })
        },
        // 获取菜单列表
        menuSelect () {
          this.tableDataLoading = true
          this.$http({
            // url: this.$http.adornUrl3('/get'),
            url: this.$http.adornUrl2('/wx/menu'),
            method: 'get',
            params: this.$http.adornParams({
              // 'access_token': this.accesstoken
            })
          }).then(({data}) => {
            this.tableDataLoading = false
            let returnData = data.menu
            if (returnData == '') {
              this.menuAdd = JSON.stringify(this.menu, null, 4)
              this.menu.button = this.menu.button
            } else {
              this.menuAdd = JSON.stringify(returnData, null, 4)
              this.menu.button = returnData.button
            }
          })
        },
        // 素材内容弹框的选择按钮函数
        handleEdit (index, row) {
          this.visible2 = false
          this.tempObj.media_id = row.name
        },
        // 保存并发布至菜单
        saveFun () {
          console.log(this.menu)
          this.$http({
            url: this.$http.adornUrl2(`/wx/create`),
            // url: 'https://api.weixin.qq.com/cgi-bin/menu/create?access_token='+this.accesstoken,
            method: 'post',
            data: this.menu
            // params: this.$http.adornParams({})
          }).then(({data}) => {
            if (data.errcode == 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.menuSelect()
                }
              })
            }
          }).catch(() => {
            this.$message({
              message: '操作失败',
              type: 'error',
              duration: 1500,
              onClose: () => {
                this.menuSelect()
              }
            })
          })
        },
        // 一级菜单点击事件
        menuFun (i, item) {
          this.showRightFlag = false//右边菜单隐藏
          console.log(i)
          this.tempObj = item//这个如果放在顶部，flag会没有。因为重新赋值了。
          this.tempSelfObj.grand = '1'//表示一级菜单
          this.tempSelfObj.index = i//表示一级菜单索引

          this.isActive = i //一级菜单选中样式
          this.isSubMenuFlag = i //二级菜单显示标志
          this.isSubMenuActive = -1 //二级菜单去除选中样式

        },
        // 二级菜单点击事件
        subMenuFun (item, subItem, index, k) {
          this.showRightFlag = false//右边菜单隐藏

          this.tempObj = subItem//将点击的数据放到临时变量，对象有引用作用

          this.tempSelfObj.grand = '2'//表示二级菜单
          this.tempSelfObj.index = index//表示一级菜单索引
          this.tempSelfObj.secondIndex = k//表示二级菜单索引

          this.isSubMenuActive = index + '' + k //二级菜单选中样式
          this.isActive = -1//一级菜单去除样式
        },
        // 添加横向一级菜单
        addMenu () {
          // 先判断1，再判断2,对象增加，会进行往下计算，所以必须先判断2，再判断1
          if (this.menuKeyLength == 2) {
            this.$set(this.menu.button, '2',
              {
                // type: "",
                name: '菜单3',
                // url: "",//跳转链接
                // media_id:"",//素材名称--图文消息
                sub_button: []
              }
            )
          }
          if (this.menuKeyLength == 1) {
            this.$set(this.menu.button, '1',
              {
                // type: "",
                name: '菜单2',
                // url: "",//跳转链接
                // media_id:"",//素材名称--图文消息
                sub_button: []
              }
            )
          }
        },
        // 添加横向二级菜单
        addSubMenu (item) {
          let subMenuKeyLength = item.sub_button.length//获取二级菜单key长度
          if (subMenuKeyLength == 4) {
            this.$set(item.sub_button, '4',
              {
                // type: "",
                name: '子菜单5',
                // url: "",//跳转链接
                // media_id:"",//素材名称--图文消息
              }
            )
          }
          if (subMenuKeyLength == 3) {
            this.$set(item.sub_button, '3',
              {
                // type: "",
                name: '子菜单4',
                // url: "",//跳转链接
                // media_id:"",//素材名称--图文消息
              }
            )
          }
          if (subMenuKeyLength == 2) {
            this.$set(item.sub_button, '2',
              {
                // type: "",
                name: '子菜单3',
                // url: "",//跳转链接
                // media_id:"",//素材名称--图文消息
              }
            )
          }
          if (subMenuKeyLength == 1) {
            this.$set(item.sub_button, '1',
              {
                // type: "",
                name: '子菜单2',
                // url: "",//跳转链接
                // media_id:"",//素材名称--图文消息
              }
            )
          }
          if (subMenuKeyLength == 0) {
            this.$set(item.sub_button, '0',
              {
                // type: "",
                name: '子菜单1',
                // url: "",//跳转链接
                // media_id:"",//素材名称--图文消息
              }
            )
          }
        },
        //删除当前菜单
        deleteMenu (obj) {
          console.log(obj)
          var _this = this
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            _this.deleteData()// 删除菜单数据
          }).catch(() => {

          })
        },
        // 删除菜单数据
        deleteData () {
          // 一级菜单的删除方法
          if (this.tempSelfObj.grand == '1') {
            this.menu.button.splice(this.tempSelfObj.index, 1)
          }
          // 二级菜单的删除方法
          if (this.tempSelfObj.grand == '2') {
            this.menu.button[this.tempSelfObj.index].sub_button.splice(this.tempSelfObj.secondIndex, 1)
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      },
      computed: {
        // menuObj的长度，当长度 小于  3 才显示一级菜单的加号
        menuKeyLength: function () {
          return this.menu.button.length
        }
      },
      mounted () {
        this.dataSelect()
      }
    }
</script>

<style scoped = "scoped">
  .eit {
    height: 120px;
  }

  /* 公共颜色变量 */
  .clearfix {
    *zoom: 1;
  }

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

  div {
    text-align: left;
  }

  .public-account-management {
    min-width: 1200px;
    width: 1200px;
    margin: 0 auto;
    /*右边菜单内容*/
  }

  .public-account-management .left {
    float: left;
    display: inline-block;
    width: 350px;
    height: 800px;
    background: url("~@/assets/iphone_backImg.png") no-repeat;
    background-size: 100% auto;
    padding: 581px 25px 88px;
    position: relative;
    box-sizing: border-box;
    /*第一级菜单*/
  }

  .public-account-management .left .menu {
    /*第二级菜单*/
  }

  .public-account-management .left .menu .menu_bottom {
    position: relative;
    float: left;
    display: inline-block;
    box-sizing: border-box;
    width: 100px;
    /*height: 44px;*/
    /*line-height: 44px;*/
    text-align: center;
    background-color: #e2e2e2;
    border: 1px solid #ebedee;
    cursor: pointer;
  }

  .public-account-management .left .menu .menu_bottom.menu_addicon {
    height: 46px;
    line-height: 46px;
  }

  .public-account-management .left .menu .menu_bottom .menu_item {
    height: 44px;
    line-height: 44px;
    /*padding: 14px 0;*/
    text-align: center;
    box-sizing: border-box;
  }

  .public-account-management .left .menu .menu_bottom .menu_item.active {
    border: 1px solid #2bb673;
  }

  .public-account-management .left .menu .menu_bottom .menu_subItem {
    height: 44px;
    line-height: 44px;
    text-align: center;
    box-sizing: border-box;
    /*padding: 14px 0;*/
  }

  .public-account-management .left .menu .menu_bottom .menu_subItem.active {
    border: 1px solid #2bb673;
  }

  .public-account-management .left .menu i {
    color: #2bb673;
  }

  .public-account-management .left .menu .submenu {
    position: absolute;
    width: 100px;
    bottom: 45px;
  }

  .public-account-management .left .menu .submenu .subtitle {
    background-color: #e8e7e7;
    box-sizing: border-box;
    margin-bottom: 2px;
  }

  .public-account-management .right .save_btn {
    position: absolute;
    bottom: 20px;
    left: 40%;
  }

  .public-account-management .right {
    float: left;
    width: -webkit-calc(100% - 370px);
    width: -moz-calc(100% - 370px);
    width: calc(100% - 370px);
    position: relative;
    background-color: #e8e7e7;
    padding: 25px 10px 0px 20px;
    height: 710px;
    margin-left: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .public-account-management .right .configure_page .delete_btn {
    text-align: right;
    margin-bottom: 15px;
  }

  .public-account-management .right .configure_page .menu_content {
    margin-top: 20px;
  }

  .public-account-management .right .configure_page .configur_content {
    margin-top: 20px;
  }

  .public-account-management .right .configure_page .blue {
    color: #29b6f6;
    margin-top: 10px;
  }

  .public-account-management .right .configure_page .applet {
    margin-bottom: 20px;
  }

  .public-account-management .right .configure_page .applet span {
    margin-right: 18px;
  }

  .public-account-management .right .configure_page .material .input_width {
    width: 30%;
  }

  .public-account-management .right .configure_page .material .el-textarea {
    width: 80%;
  }

  .public-account-management .el-input {
    width: 78%;
  }

  .public-account-management .material .el-button {
    float: right;
  }

</style>
